<template>
  <div class="app-container">
    <div class="filter-container clearfix">
      <el-select v-model="listQuery.sid" class="filter-item" style="width: 110px;" clearable filterable :loading="loading" placeholder="选择区服">
        <el-option
          v-for="item in serverList"
          :key="item.sid"
          :label="item.name+'('+item.sid+')'"
          :value="item.sid"
        >
        </el-option>
      </el-select>
      <el-select v-model="listQuery.item_id" class="filter-item" style="width: 130px;" clearable :loading="loading" placeholder="选择监控类型">
        <el-option
          v-for="item in items"
          :key="item.type"
          :label="item.name+'('+item.sid+')'"
          :value="item.type"
        >
        </el-option>
      </el-select>
      <el-date-picker v-model="listQuery.start_date" class="filter-item" type="date" style="width: 140px;" placeholder="开始日期"></el-date-picker>-
      <el-date-picker v-model="listQuery.end_date" class="filter-item" type="date" style="width: 140px;" placeholder="结束日期"></el-date-picker>
      <el-button class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button v-if="checkPermission(permissionRoles.monitor_server_config_add)" class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd">监控配置</el-button>
    </div>
    <el-table ref="table" v-loading="listLoading" :data="list" border stripe style="width: 100%;" height="830">
      <el-table-column label="服务器" prop="sname" width="100px" align="center"></el-table-column>
      <el-table-column label="监控类型" prop="type" width="110px" align="center"></el-table-column>
      <el-table-column label="异常时间" prop="create_dt" width="140px" align="center"></el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" title="监控配置" :close-on-click-modal="false">
      <el-form ref="dataForm" :model="form" label-width="110px" label-position="right">
        <el-form-item label="充值监控">
          <el-switch v-model="form.recharge.status" active-text="开" inactive-text="关" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="消息通知开关">
          <el-switch v-model="form.recharge.notify" active-text="开" inactive-text="关" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="服务器范围">
          <el-radio v-model="form.recharge.scope" label="1">全部服</el-radio>
          <el-radio v-model="form.recharge.scope" label="0">正式服</el-radio>
        </el-form-item>
        <el-form-item label="新服无充值时间">
          <el-input v-model="form.recharge.ext1" class="defaut-input" placeholder="单位分钟" />
        </el-form-item>
        <el-form-item label="老服无充值时间">
          <el-input v-model="form.recharge.ext2" class="defaut-input" placeholder="单位小时" />
        </el-form-item>
        <el-form-item label="监控范围">
          <el-input v-model="form.recharge.range" class="defaut-input" placeholder="单位天，开服天数大于等于该值的服务器不再监控" />
        </el-form-item>
        <el-form-item label="监控频率">
          <el-input v-model="form.recharge.frequency" class="defaut-input" placeholder="单位分钟" />
        </el-form-item>
        <el-form-item label="在线监控">
          <el-switch
            v-model="form.online.status"
            active-text="开"
            inactive-text="关"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="监控范围">
          <el-input v-model="form.online.range" class="defaut-input" placeholder="单位天，开服天数大于等于该值的服务器不再监控" />
        </el-form-item>
        <el-form-item label="监控频率">
          <el-input v-model="form.online.frequency" class="defaut-input" placeholder="单位分钟" />
        </el-form-item>

      </el-form>
      <div class="tr">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmSubmit()">确定</el-button>
      </div>
    </el-dialog>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import waves from '@/directive/waves' // 实现点击波浪纹
import { deepClone } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { handleMonitorServerConfig, getMonitorServerList, getMonitorServerConfig } from '@/api/monitor'
import { getServerList } from '@/api/ops'

export default {
  name: 'MonitorServer',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      permissionRoles: this.$store.state.user.permissionRoles,
      list: [],
      serverList: [],
      items: [],
      total: 0,
      loading: false,
      listLoading: false,
      form: {
        recharge: {
          type: 'recharge',
          notify: '0',
          scope: '0',
          ext1: '',
          ext2: '',
          range: '',
          frequency: '',
          status: '0'
        },
        online: {
          type: 'online',
          range: '',
          frequency: '',
          status: '0'
        }
      },
      listQuery: {
        sid: '',
        start_date: new Date(Date.now() - 86400000 * 7),
        end_date: new Date(),
        page: 1,
        limit: 200
      },
      dialogVisible: false
    }
  },
  created() {
    this.getList()
    this.getServerList()
  },
  methods: {
    checkPermission,
    async getList() {
      this.listLoading = true
      const res = await getMonitorServerList(this.listQuery)
      this.listLoading = false
      this.list = res.data.items
      this.total = res.data.total
      this.items = res.data.item
    },
    handleFilter() {
      this.getList()
    },
    handleAdd() {
      this.getMonitorServerConfig()
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    confirmSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          handleMonitorServerConfig(this.form).then(response => {
            if (response.status) {
              this.dialogVisible = false
              this.getList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
            } else {
              this.message.error(response.message)
            }
          })
        }
      })
    },
    async getMonitorServerConfig() {
      const res = await getMonitorServerConfig()
      res.data.forEach(it => {
        if (it.type === 'recharge') {
          this.form.recharge.type = it.type
          this.form.recharge.status = it.status + ''
          this.form.recharge.range = it.range
          this.form.recharge.frequency = it.frequency
          this.form.recharge.ext1 = it.ext1
          this.form.recharge.ext2 = it.ext2
          this.form.recharge.notify = it.notify
        }
        if (it.type === 'online') {
          this.form.online.type = it.type
          this.form.online.status = it.status + ''
          this.form.online.range = it.range
          this.form.online.frequency = it.frequency
        }
      })
      this.form = deepClone(this.form)
    },
    async getServerList(params) {
      const query = params
      const res = await getServerList(query)
      this.serverList = res.data.items
      this.loading = false
    }
  }
}
</script>
